<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    /**
     * 1、将html层级结构，抽象成树形的结构 
     * 
     * 2、使用DOM节点对象来完成对页面元素的访问和操作过程
     * 
     * 3、访问过程，得到DOM节点对象
     * document.getElementById("id属性值");
     * document.getElemrntsByClassName("class属性名");//集合
     * document.getElementsByTagName("标签名");//集合
     * 
     * node.children//集合   node.parentNode   node.previousElementSibling
     * node.firstEementChild
     * 
     * 4、DOM元素的属性
     * 
     * node.innerHTML 获取或者设置DOM节点中的html代码
     * node.innerTest 获取或者设置DOM节点中文本内容
     * node.getAttribute("属性名")//获取特定属性
     * node.setAttribute("属性名","属性值")//设置特定属性值
     * node.hasAttribute("属性名");
     * node.removeAttribute("属性名");
     */
</script>
</html>